<!-- 
  Ref
    是一个特殊属性，用于普通元素或组件上

  Ref的作用是：
    1. 用于普通元素，获取该普通元素的DOM对象
    2. 用于组件元素，获取该组件的实例对象

  使用方式：
    1. 先通过 ref 属性给元素或组件标记一个值
      <div ref="abcd"></div>
      <el-button ref="efdl"></el-button>
    2. 在组件挂载完毕之后，就可以通过 this.$refs.xxx 获取到标记的内容

 -->

<template>
  <div>
    <h1>App</h1>
    <!-- 标记普通元素，用于后续获取该元素的DOM对象 -->
    <button ref="myBtn">Hello World</button>
    <!-- 标记组件元素，用于后续获取该组件的实例对象 -->
    <Hello ref="myHello"></Hello>

    <hr />
    <button @click="$refs.myHello.name = 'world'">
      点我，修改Hello组件的名字
    </button>

    <hr />
    <CountDown :time="5 * 1000" @finish="onFinish" />

    <CountDown ref="myCountDown" :time="60 * 1000" :autoStart="false" />
    <button @click="$refs.myCountDown && $refs.myCountDown.start()">
      开始
    </button>
    <button @click="$refs.myCountDown && $refs.myCountDown.pause()">
      暂停
    </button>
    <button @click="$refs.myCountDown && $refs.myCountDown.reset()">
      重置
    </button>
  </div>
</template>

<script>
import Hello from "./components/Hello.vue";
import CountDown from "./components/CountDown.vue";

export default {
  components: {
    Hello,
    CountDown,
  },
  data() {
    return {
      age: 18,
    };
  },
  methods: {
    onFinish() {
      console.log("onFinish");
    },
  },
  created() {
    console.log(this.$refs.myBtn, "created");
    console.log(this.$refs.myHello, "created");
  },
  mounted() {
    console.log(this.$refs.myBtn);
    console.log(this.$refs.myHello);
  },
};
</script>
